<!-- Widget --> <div class="widget widget-inverse"> <div class="widget-head"> <h3 class="heading"><i class="icon-stocks-up fa fa-fw"></i> Recent Activity</h3> </div> <div class="widget-body padding-none"> <div class="widget widget-tabs widget-tabs-icons-only-2 widget-activity margin-none border-none"> <!-- Tabs Heading --> <div class="widget-head"> <ul> <li><a class="glyphicons user_add" data-toggle="tab" href="#filterUsersTab"><i></i>Users</a></li> <li><a class="glyphicons shopping_cart" data-toggle="tab" href="#filterOrdersTab"><i></i>Orders</a></li> <li class="active"><a class="glyphicons envelope" data-toggle="tab" href="#filterMessagesTab"><i></i></a></li> <li><a class="glyphicons link" data-toggle="tab" href="#filterLinksTab"><i></i></a></li> <li><a class="glyphicons camera" data-toggle="tab" href="#filterPhotosTab"><i></i></a></li> </ul> </div> <!-- // Tabs Heading END --> <div class="widget-body padding-none"> <div class="tab-content"> <!-- Filter Users Tab --> <div class="tab-pane" id="filterUsersTab"> <ul class="list"> <!-- Activity item --> <li> <span class="date">21/03</span> <span class="glyphicons activity-icon user_add"><i></i></span> <span class="ellipsis"><a href="">Darius Jackson</a> registered at <a href="">Darius Jackson's</a> suggestion.</span> <div class="clearfix"></div> </li> <!-- // Activity item END --> <!-- Activity item --> <li> <span class="date">21/03</span> <span class="glyphicons activity-icon user_add"><i></i></span> <span class="ellipsis"><a href="">John Doe</a> registered at <a href="">John Doe's</a> suggestion.</span> <div class="clearfix"></div> </li> <!-- // Activity item END --> <!-- Activity item --> <li> <span class="date">21/03</span> <span class="glyphicons activity-icon user_add"><i></i></span> <span class="ellipsis"><a href="">Melisa Ragae</a> registered at <a href="">Jane Doe's</a> suggestion.</span> <div class="clearfix"></div> </li> <!-- // Activity item END --> <!-- Activity item --> <li> <span class="date">21/03</span> <span class="glyphicons activity-icon user_add"><i></i></span> <span class="ellipsis"><a href="">Melisa Ragae</a> registered at <a href="">Darius Jackson's</a> suggestion.</span> <div class="clearfix"></div> </li> <!-- // Activity item END --> <!-- Activity item --> <li> <span class="date">21/03</span> <span class="glyphicons activity-icon user_add"><i></i></span> <span class="ellipsis"><a href="">John Doe</a> registered at <a href="">Jane Doe's</a> suggestion.</span> <div class="clearfix"></div> </li> <!-- // Activity item END --> </ul> </div> <!-- // Filter Users Tab END --> <!-- Filter Orders Tab --> <div class="tab-pane" id="filterOrdersTab"> <ul class="list"> <!-- Activity item --> <li> <span class="date">21/03</span> <span class="glyphicons activity-icon shopping_cart"><i></i></span> <span class="ellipsis"><a href="">Melisa Ragae</a> bought 10 items worth of €50 (<a href="">order #2301</a>)</span> <div class="clearfix"></div> </li> <!-- // Activity item END --> <!-- Activity item --> <li> <span class="date">21/03</span> <span class="glyphicons activity-icon shopping_cart"><i></i></span> <span class="ellipsis"><a href="">Melisa Ragae</a> bought 10 items worth of €50 (<a href="">order #2302</a>)</span> <div class="clearfix"></div> </li> <!-- // Activity item END --> <!-- Activity item --> <li> <span class="date">21/03</span> <span class="glyphicons activity-icon shopping_cart"><i></i></span> <span class="ellipsis"><a href="">Jane Doe</a> bought 10 items worth of €50 (<a href="">order #2303</a>)</span> <div class="clearfix"></div> </li> <!-- // Activity item END --> <!-- Activity item --> <li> <span class="date">21/03</span> <span class="glyphicons activity-icon shopping_cart"><i></i></span> <span class="ellipsis"><a href="">John Doe</a> bought 10 items worth of €50 (<a href="">order #2304</a>)</span> <div class="clearfix"></div> </li> <!-- // Activity item END --> <!-- Activity item --> <li> <span class="date">21/03</span> <span class="glyphicons activity-icon shopping_cart"><i></i></span> <span class="ellipsis"><a href="">Darius Jackson</a> bought 10 items worth of €50 (<a href="">order #2305</a>)</span> <div class="clearfix"></div> </li> <!-- // Activity item END --> </ul> </div> <!-- // Filter Orders Tab END --> <!-- Filter Messages Tab --> <div class="tab-pane active" id="filterMessagesTab"> <ul class="list"> <!-- Activity item --> <li class="double"> <span class="glyphicons activity-icon envelope"><i></i></span> <span class="ellipsis"> You have received an email from <a href="">Melisa Ragae</a> (melisa.ragae@grr-email.net) <span class="meta">on 29 March, 2013 <span>1 hour ago</span></span> </span> <div class="clearfix"></div> </li> <!-- // Activity item END --> <!-- Activity item --> <li class="double highlight"> <span class="glyphicons activity-icon envelope"><i></i></span> <span class="ellipsis"> You have received an email from <a href="">Martin Glades</a> (martin.glades@wee-email.com) <span class="meta">on 29 March, 2013 <span>1 hour ago</span></span> </span> <div class="clearfix"></div> </li> <!-- // Activity item END --> <!-- Activity item --> <li class="double"> <span class="glyphicons activity-icon envelope"><i></i></span> <span class="ellipsis"> You have received an email from <a href="">Martin Glades</a> (martin.glades@wee-email.com) <span class="meta">on 29 March, 2013 <span>1 hour ago</span></span> </span> <div class="clearfix"></div> </li> <!-- // Activity item END --> <!-- Activity item --> <li class="double"> <span class="glyphicons activity-icon envelope"><i></i></span> <span class="ellipsis"> You have received an email from <a href="">Darius Jackson</a> (darius.jackson@fake-email.net) <span class="meta">on 29 March, 2013 <span>1 hour ago</span></span> </span> <div class="clearfix"></div> </li> <!-- // Activity item END --> <!-- Activity item --> <li class="double"> <span class="glyphicons activity-icon envelope"><i></i></span> <span class="ellipsis"> You have received an email from <a href="">Melisa Ragae</a> (melisa.ragae@grr-email.net) <span class="meta">on 29 March, 2013 <span>1 hour ago</span></span> </span> <div class="clearfix"></div> </li> <!-- // Activity item END --> </ul> </div> <!-- // Filter Messages Tab END --> <!-- Filter Links Tab --> <div class="tab-pane" id="filterLinksTab"> <ul class="list"> <!-- Activity item --> <li> <span class="date">21/03</span> <span class="glyphicons activity-icon link"><i></i></span> <span class="ellipsis"><a href="">Martin Glades</a> bought 10 items worth of €50 (<a href="">order #2301</a>)</span> <div class="clearfix"></div> </li> <!-- // Activity item END --> <!-- Activity item --> <li> <span class="date">21/03</span> <span class="glyphicons activity-icon link"><i></i></span> <span class="ellipsis"><a href="">Melisa Ragae</a> bought 10 items worth of €50 (<a href="">order #2302</a>)</span> <div class="clearfix"></div> </li> <!-- // Activity item END --> <!-- Activity item --> <li> <span class="date">21/03</span> <span class="glyphicons activity-icon link"><i></i></span> <span class="ellipsis"><a href="">Jane Doe</a> bought 10 items worth of €50 (<a href="">order #2303</a>)</span> <div class="clearfix"></div> </li> <!-- // Activity item END --> <!-- Activity item --> <li> <span class="date">21/03</span> <span class="glyphicons activity-icon link"><i></i></span> <span class="ellipsis"><a href="">Martin Glades</a> bought 10 items worth of €50 (<a href="">order #2304</a>)</span> <div class="clearfix"></div> </li> <!-- // Activity item END --> <!-- Activity item --> <li> <span class="date">21/03</span> <span class="glyphicons activity-icon link"><i></i></span> <span class="ellipsis"><a href="">Martin Glades</a> bought 10 items worth of €50 (<a href="">order #2305</a>)</span> <div class="clearfix"></div> </li> <!-- // Activity item END --> </ul> </div> <!-- // Filter Links Tab END --> <!-- Filter Photos Tab --> <div class="tab-pane" id="filterPhotosTab"> <ul class="list"> <!-- Activity item --> <li> <span class="date">21/03</span> <span class="glyphicons activity-icon camera"><i></i></span> <span class="ellipsis"><a href="">Darius Jackson</a> bought 10 items worth of €50 (<a href="">order #2301</a>)</span> <div class="clearfix"></div> </li> <!-- // Activity item END --> <!-- Activity item --> <li> <span class="date">21/03</span> <span class="glyphicons activity-icon camera"><i></i></span> <span class="ellipsis"><a href="">Martin Glades</a> bought 10 items worth of €50 (<a href="">order #2302</a>)</span> <div class="clearfix"></div> </li> <!-- // Activity item END --> <!-- Activity item --> <li> <span class="date">21/03</span> <span class="glyphicons activity-icon camera"><i></i></span> <span class="ellipsis"><a href="">John Doe</a> bought 10 items worth of €50 (<a href="">order #2303</a>)</span> <div class="clearfix"></div> </li> <!-- // Activity item END --> <!-- Activity item --> <li> <span class="date">21/03</span> <span class="glyphicons activity-icon camera"><i></i></span> <span class="ellipsis"><a href="">Jane Doe</a> bought 10 items worth of €50 (<a href="">order #2304</a>)</span> <div class="clearfix"></div> </li> <!-- // Activity item END --> </ul> </div> <!-- // Filter Photos Tab END --> </div> </div> </div> </div> </div>
@import "assets/components/modules/admin/widgets/widget-activity/assets/less/widget-activity.less"; @import "assets/components/core/less/widgets.less"; @import "assets/components/modules/admin/tabs/assets/tabs.less";
<head>
section of your HTML document, before any JavaScript files: <link type="stylesheet/less" href="styles.less" />
NOTE All the styles from the CORE package also need to be imported in this file, before the component imports.
<!-- Activity/List Widget --> <h2 class="margin-none separator bottom"><i class="icon-signal text-primary icon-fixed-width"></i> Activity</h2> <div class="widget widget-heading-simple widget-body-gray" data-toggle="collapse-widget"> <div class="widget-body list"> <ul> <!-- List item --> <li> <span>Sales today</span> <span class="count">€5,900</span> </li> <!-- // List item END --> <!-- List item --> <li> <span>Some other stats</span> <span class="count">36,900</span> </li> <!-- // List item END --> <!-- List item --> <li> <span>Some stunning stats</span> <span class="count">26,999</span> </li> <!-- // List item END --> <!-- List item --> <li> <span>Awesome stats</span> <span class="count">4,900</span> </li> <!-- // List item END --> </ul> </div> </div> <!-- // Activity/List Widget END -->
@import "assets/components/modules/admin/widgets/widget-activity/assets/less/widget-activity.less"; @import "assets/components/core/less/widgets.less"; @import "assets/components/modules/admin/tabs/assets/tabs.less";
<head>
section of your HTML document, before any JavaScript files: <link type="stylesheet/less" href="styles.less" />
NOTE All the styles from the CORE package also need to be imported in this file, before the component imports.